# @Version        : 1.0
# @Update Time    : 2025/3/15 0:59
# @File           : login_view.py
# @IDE            : PyCharm
# @Desc           : 文件描述信息

import flet as ft


class LoginView(ft.Column):
    def __init__(self, page: ft.Page, params: dict = None):
        super().__init__()
        # 样式配置
        self.page = page
        self.params = params
        self.primary_color = "#4CAF50"
        self.text_color = "#333333"
        self.divider_color = "#BDBDBD"
        self.form_width = 400
        self.spacing = 20

        # 新增错误提示控件
        self.email_error = ft.Text(value="", color="red", visible=False)
        self.password_error = ft.Text(value="", color="red", visible=False)

        # 构建界面
        self._build_view()

    def _build_view(self):
        self.controls = [
            self._build_header(),
            self._build_inputs(),
            self._build_login_button(),
            *self._build_social_icons(),
            self._build_register_link()
        ]

        self.width = self.form_width
        self.spacing = self.spacing
        self.horizontal_alignment = ft.CrossAxisAlignment.CENTER
        self.bgcolor = self.primary_color  # 修改为使用主色调

        # 添加内容容器并设置背景颜色
        self.content = ft.Container(
            content=self,
            bgcolor=self.primary_color  # 修改为使用主色调
        )

    def _build_header(self):
        return ft.Text(
            "欢迎回到生鲜到家！",
            size=24,
            weight=ft.FontWeight.BOLD,
            color=self.primary_color
        )

    def _build_inputs(self):
        return ft.Column(
            [
                self._build_input_field(
                    label="邮箱地址",
                    value="ceshi@email.com",
                    icon=ft.icons.EMAIL_OUTLINED
                ),
                self.email_error,  # 添加错误提示控件
                self._build_input_field(
                    label="密码",
                    password=True,
                    icon=ft.icons.LOCK_OUTLINE,
                    suffix=ft.TextButton(
                        "忘记密码？",
                        style=ft.ButtonStyle(color=self.primary_color),
                        on_click=lambda e: self.page.go("/forgot_password")
                    )
                ),
                self.password_error  # 添加错误提示控件
            ], spacing=15
        )

    def _build_input_field(self, label, value="", icon=None, password=False, suffix=None):
        return ft.TextField(
            label=label,
            value=value,
            password=password,
            can_reveal_password=True if password else False,
            border_color=self.divider_color,
            focused_border_color=self.primary_color,
            border_radius=8,
            filled=True,
            bgcolor="#FAFAFA",
            prefix_icon=icon,
            suffix=suffix,
            text_size=14,
            content_padding=12
        )

    def _build_login_button(self):
        return ft.ElevatedButton(
            "登录",
            style=ft.ButtonStyle(
                bgcolor=self.primary_color,
                shape=ft.RoundedRectangleBorder(radius=8),
                # padding={ft.ControlState.DEFAULT: 20}  # 修改为 ControlState
            ),
            color="white",
            width=float("inf"),
            height=48,
            on_click=lambda e: self.validate_login_info()
        )

    def _build_social_icons(self):
        return [ft.Row(
            controls=[
                ft.Container(expand=True, height=1, bgcolor="#BDBDBD"),
                ft.Text("或者使用", color="#333333", size=12),
                ft.Container(expand=True, height=1, bgcolor="#BDBDBD")
            ],
            alignment=ft.MainAxisAlignment.CENTER,
            spacing=10
        ),
            ft.Row(
                [
                    ft.IconButton(ft.icons.WECHAT, icon_color="#09B83E"),
                    ft.IconButton(ft.icons.QR_CODE, icon_color="#1677FF"),
                    ft.IconButton(ft.icons.TIKTOK, icon_color="#FF0050")
                ],
                alignment=ft.MainAxisAlignment.CENTER,
                spacing=20
            ), ]

    def _build_social_icon(self, icon, color, bgcolor):
        return ft.IconButton(
            icon=icon,
            icon_color=color,
            icon_size=32,
            style=ft.ButtonStyle(
                shape=ft.CircleBorder(),
                padding=15,
                bgcolor=bgcolor
            )
        )

    def _build_register_link(self):
        return ft.TextButton(
            content=ft.Row(
                [
                    ft.Text("新用户？", color=self.text_color),
                    ft.Text("注册", color=self.primary_color)
                ]
            ),
            on_click=lambda e: self.page.go("/register")
        )

    # 校验登录信息是否填写完整
    def validate_login_info(self):
        email = self.controls[1].controls[0].value  # 更新索引以跳过错误提示控件
        password = self.controls[1].controls[2].value  # 更新索引以跳过错误提示控件
        self.email_error.visible = False  # 重置错误提示
        self.password_error.visible = False  # 重置错误提示

        if not email:
            self.email_error.value = "请输入邮箱地址"
            self.email_error.visible = True
        if not password:
            self.password_error.value = "请输入密码"
            self.password_error.visible = True
        self.update()
        return email and password
